
addEventListener('load',function(){
    var items = document.querySelectorAll('.item');

    var goPreBtn = document.querySelector('#goPre');

    var goNextBtn = document.querySelector('#goNext');

    var pointLists = document.querySelectorAll('.point');

    var wrap = document.querySelector('.wrap');
    var index = 0;
    var time = 0;
    var timer = null;
    var lock = true; //节流阀
    
    function clearIndex() {
        
        for (var i = 0; i < items.length; i++) {
            items[i].className='item';
            pointLists[i].className='point';
        }
        
    }

    function goIndex() {
        clearIndex();
        items[index].className = 'item active';
        pointLists[index].className = 'point current';
    }
    goIndex();

    function goNext() {
        index++;
        if (index > 4) {
            index = 0;
        }
        goIndex();
    }

    function goPre() {
        index--;
        if (index < 0) {
            index = 4;
        }
        goIndex();
    }

    function rest() {
        time++;

        if (time == 20) {
            time = 0;
            goNext();
        }
    }

    function openLock() {
        lock = true;
    }

    goNextBtn.addEventListener('click', function() {
        if (!lock) return; //是false直接结束函数
        goNext();
        time = 0;
        lock = false;
        //延迟1s，让transition的过渡时间过渡完再打开
        setTimeout(openLock, 1000)

    });
    goPreBtn.addEventListener('click', function() {
        if (!lock) return;
        goPre();
        lock = false;
        time = 0;

        setTimeout(openLock, 1000);
    });

    for (var j = 0; j < pointLists.length; j++) {
        pointLists[j].setAttribute('pointIndex', j);

        pointLists[j].addEventListener('click', function() {
            var pIndex = this.getAttribute('pointIndex');
            index = pIndex;
            goIndex();
            time = 0;
        })
    }

    wrap.addEventListener('mouseover', function() {
        clearInterval(timer);
        time = 0;
    })
    wrap.addEventListener('mouseout', function() {
        time = 0;
        timer = setInterval(rest, 500); // 自动播放时间
    })
    timer = setInterval(rest, 500)

})